<template>
  <h-container>
    <div class="alert alert-danger">
      注意：该页面显示的<span class="i-info">商品</span>可主动购买，如果有看中喜欢的请点击<span class="i-info">购买</span>进行购买。
    </div>
    <div class="col col-12">
      <div v-if="datas.length>0" class="sell-good">
        <div v-for="(item,index) in datas" :key="item.id" class="good img-thumbnail">
          <div class="good-img">
            <img :src="item|goodImg" @click="imgClick(item)" class="img-thumbnail"/>
            <div class="good-name">{{item.good.name}}</div>
          </div>
          <div class="sell-info">
            <div class="sell-info-inf">
              <div>
                <span class="label">品牌:</span><span>{{item.brand.name}}</span>
              </div>
              <div>
                <span class="label">编码:</span><span>{{item.itemNo}}</span>
              </div>
              <div>
                <span class="label">分类:</span><span>{{item.category.namePath}}</span>
              </div>
              <div v-for="spec in specDatas(item)" :key="spec.id">
                <span class="label">{{spec.name}}:</span><span>{{spec.value}}</span>
              </div>
              <div>
                <span class="label">原价:</span><span class="red">￥{{item.sellPrice}}</span>
              </div>
              <div>
                <span class="label">已售:</span><span class="red">{{item.sellNum}}</span>
                <span class="label">库存:</span><span class="red">{{item.arrivalNum-item.sellNum}}</span>
              </div>
            </div>
            <div class="buy-button">
              <el-button type="primary" class="buy-button-size" @click="doBuy(index,item)"><i
                class="fa  fa-shopping-cart"/> 购买(￥{{item.price}})
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <div class="alert alert-info text-center">
             亲，现货已卖光，请期待新的商品吧。
        </div>
      </div>
    </div>

    <el-dialog
      title=""
      :visible.sync="loaded"
      top="10vh"
      :append-to-body="true"
      :modal-append-to-body="true"
      width="640px"
      class="pic-dialog"
    >
      <el-row>
        <el-carousel :autoplay="false" height="640px">
          <el-carousel-item v-for="(item,index) in imgs" :key="item.id">
            <img :src="item.url" width="640px" height="640px"/>
          </el-carousel-item>
        </el-carousel>
      </el-row>
    </el-dialog>

    <h-buy-dialog v-model="selectedShop" :show.sync="showBuyLoading" title="购买"></h-buy-dialog>


  </h-container>
</template>
<script>
  import FrontService from 'src/service/front'
  import HContainer from 'src/components/shop/layout/Container'
  import HBuyDialog from 'src/components/shop/common/HBuyDialog'

  export default {
    name: 'ShopDashboard',
    components: {HBuyDialog, HContainer},
    data() {
      return {
        loading: false,
        picId: 0,
        datas: [],
        search: {
          pagination: {
            total: 0,
            page: 1,
            limit: 10
          },
          orderBy: 'id desc'
        },
        selectedIndex: 0,
        selectedShop: null,
        showBuyLoading: false,
        loaded: false,
        imgs: []
      }
    },
    filters: {
      goodImg: function (data) {
        if (data != null && data.imgs != null && data.imgs.length > 0) {
          return data.imgs[0] + '?x-oss-process=style/small'
        } else {
          return '#'
        }
      }
    },
    methods: {
      doBuy: function (index, data) {
        this.selectedIndex = index
        this.selectedShop = data
        this.showBuyLoading = true
      },
      specDatas: function (data) {
        if (data != null) {
          if (data.specs != undefined && data.specs != null) {
            if (data.specs.datas != null) {
              return data.specs.datas
            }
          }
        }
        return []
      },
      imgClick: function (data) {
        const me = this
        this.imgs = data.imgs.map(d => {
            return {
              url: d,
              id: me.picId++
            }
          }
        )
        this.loaded = true
      },
      getDatas: function () {
        const me = this
        me.loading = true
        FrontService.sellSearch(me.search).then(ds => {
          if (ds != null) {
            me.datas = ds.datas
            me.search.pagination = ds.pagination
          }
          me.loading = false
        })
      }
    },
    mounted: function () {
      this.getDatas()
    }
  }
</script>
